<template>
  <!-- 登录页面 -->
  <view style="text-align: center;">
    <!-- 整个box -->
    <view class="box" style="margin-top: 160rpx;">
      <!-- 打卡信息 -->
      <view class="box2" style="padding-bottom: 60rpx;">
        <view class="title">智慧社区登录页面</view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">账号：</view>
          <view class="input"><input type="text" name="username" v-model="username"></view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="text">密码：</view>
          <view class="input"><input type="password" name="password" v-model="password"></view>
        </view>
        <view>
          <view class="text" style="width: 260rpx;">用户类型：</view>
        </view>
        <view style="border-bottom: 2rpx solid #c1c1c0;">
          <view class="input">
            <u-radio-group v-model="radioUserType" placement="row">
              <u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist" :key="index"
                :label="item.name" :name="item.name">
              </u-radio>
            </u-radio-group>
          </view>
        </view>
      </view>
      <view class="submit" style="margin-top: 60rpx;" @click="login()">登录</view>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        username: '',
        password: '',
        radioUserType: '业主',
        radiolist: [{
          name: '业主',
        }, {
          name: '管理员',
        }, {
          name: '维修人员',
        }, ],
      };
    },
    computed: {
      // 将 m_user 模块中的 userType userInfo  数据映射到当前页面中使用
      ...mapState('m_user', ['tabBarList1', 'tabBarList2', 'tabBarList3']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    methods: {
      // 将user.js  页面中的 updateUserType   updateUserInfo 方法映射到 本页面，
      // 用于修改内存中存储的userType 用户身份和 userInfo 用户信息
      ...mapMutations('m_user', ['updateUserType', 'updateUserInfo']),
      // 用于清0  tabBarIndex  和设置  tabBarList
      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      async login() {
        if (this.username !== '' && this.password !== '' && this.radioUserType !== '') { //若不为空
          // 获取当前输入和选择的内容  存入user对象中
          var user = {};
          user.username = this.username;
          user.password = this.password;
          user.usertype = this.radioUserType;
          // 发起网络请求  获取登录数据
          const {data: res} = await uni.$http.post('/user/login', user)
          // 网络请求错误
          if (res.status !== 200) return uni.$showMsg()
          // 网络请求  成功
          if (res.data.length === 0 || res.data[0].isok === false) { //账号或密码错误  登录失败
            this.username = '';
            this.password = '',
              this.radioUserType = '业主';
            return uni.$showMsg("账户或密码错误，登录失败")
          } else { //登录成功
            uni.$showMsg("登录成功")
            // 调用 user.js 页面中的 updateUserInfo 方法  存储 用户信息
            this.updateUserInfo(res.data[1].user);
            this.updateTabBarIndex(0);
            // 进行用户身份设置，并打开对应的页面
            if (this.radioUserType === '业主') { //是业主
              // 调用 user.js 页面中的 updateUserType 方法 将用户身份修改为  业主  并存入内存  用权限控制
              this.updateUserType('业主');
              // 调用 tabbar.js 页面中的 updateTabBarList 方法 将tabbarList 修改为业主的tabbarList1  并存入内存
              this.updateTabBarList(this.tabBarList1);
              uni.switchTab({
                url: '/pages/home/home'
              });
            } else if (this.radioUserType === '管理员') { //是 管理员
              // 调用 user.js 页面中的 updateUserType 方法 将用户身份修改为  业主  并存入内存  用权限控制
              this.updateUserType('管理员');
              // 调用 tabbar.js 页面中的 updateTabBarList 方法 将tabbarList 修改为管理员的tabbarList2  并存入内存
              this.updateTabBarList(this.tabBarList2);
              // 跳转到 admin-people  管理员===> 人员管理页面
              uni.redirectTo({
                url: '/pages/admin-people/admin-people'
              });
            } else { //是 维修人员
              // 调用 user.js 页面中的 updateUserType 方法 将用户身份修改为  业主  并存入内存  用权限控制
              this.updateUserType('维修人员');
              // 调用 tabbar.js 页面中的 updateTabBarList 方法 将tabbarList 修改为维修人员的tabbarList3  并存入内存
              this.updateTabBarList(this.tabBarList3);
              // 跳转到 admin-people  管理员===> 人员管理页面
              uni.switchTab({
                url: '/pages/home/home'
              });
            }

          }
        } else { //若为空
          uni.$showMsg("用户名或密码不能为空！")
          this.username = '';
          this.password = '',
            this.radioUserType = '业主';
        }
      },
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    // border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .title {
    font-size: large;
    font-weight: bold;
    color: #6A6A6A;
    display: flex;
    justify-content: center;
    padding-top: 50rpx;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }

  input {
    border: 1rpx solid #dadbde;
    text-align: left;
  }


  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
